{extend name="template/base_default"}
{block name="header"}
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/lrz.min.js"></script>
<link rel="stylesheet" href="__CSS__/demos.css">
<link rel="stylesheet" href="__CSS__/common.css">
<script type="text/javascript" src="__JS__/public.js"></script>
<link rel="stylesheet" href="__CDN__/weui/weui.min.css">
<link rel="stylesheet" href="__CDN__/weui/jquery-weui.min.css">
{/block}
{block name="body"}
<header class='demos-header'>
    <h1 class="demos-title">志愿者报名</h1>
</header>

<form action="{:url('user/volunteer')}" id="renovation" method="post" >

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="number"  name="tel" id="tel" placeholder=""/>
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">姓名*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" id="realname" name="realname" placeholder="">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">文化程度*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" id="education" name="education" placeholder="">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">身份证号*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" id="identity" name="identity" placeholder="">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">政治面貌*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" id="climate" name="climate" placeholder="">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">民族*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" id="nation" name="nation" placeholder="">
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">地址*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" name="residence" id="residence" placeholder="">
        </div>
    </div>

    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">邮箱*</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" name="email" id="email" placeholder="">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label for="" class="weui_label">出生年月</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" name="birthday" id="birthday">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
                <div class="weui_uploader_hd weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">证件照</div>
                    <div class="weui_cell_ft"></div>
                </div>
                <div class="weui_uploader_bd">
                    <ul class="weui_uploader_files" id='img'>

                    </ul>
                    <div class="weui_uploader_input_wrp">
                        <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="headimgurl" />
                        <input  type="hidden"  id="headimgurl1" name="real_photo" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd weui_cell_primary">
            <label for="" class="weui_label">性别</label>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <label><input name="sex" type="radio" value="0" />男 </label>
            <label><input name="sex" type="radio" value="1"/>女 </label>
        </div>
    </div>
    <div class="weui_btn_area" style="margin-bottom: 120px">
        <input id="submit"  type="button" value="提交"   class="weui_btn weui_btn_primary"/>
    </div>
</form>
{include file="template/nav_bar"}
<script>

    $(function(){
        var f = document.querySelector('#headimgurl');
        f.onchange = function () {
            lrz(this.files[0],{width:640,fieldName:"file"}).then(function (rst) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'weixin.php/weixin/user/up1');

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var obj = eval('(' + xhr.responseText + ')');
                        $('#img').html('<li onclick="var delimg=$(this);$.confirm(\'您确定要删除吗?\', \'确认删除?\', function() {delimg.remove();},function(){$.toast(\'取消操作\', \'cancel\');});" class="weui_uploader_file weui_uploader_status" style="background-image:url('+obj.src+')"><div class="weui_uploader_status_content"><i class="weui_icon_cancel"></i></div></li>');
                        $("#headimgurl1").val(obj.src);
                    } else {
                        // 处理其他情况
                    }
                };
                xhr.onerror = function () {
                    // 处理错误
                };

                xhr.upload.onprogress = function (e) {
                    // 上传进度
                    var percentComplete = ((e.loaded / e.total) || 0) * 100;
                };
                // 添加参数
                rst.formData.append('size', rst.fileLen);
                rst.formData.append('base64', rst.base64);
                // 触发上传
                xhr.send(rst.formData);

                return rst;
            })
                    .catch(function (err) {
                        alert(err);
                    })
                    .always(function () {
                        // 不管是成功失败，这里都会执行
                    });
        }
    })
</script>
<script>


    $('#submit').click(function () {
        var $phone = $('#tel');
        if(!$phone.val()||isNaN($phone.val())||$phone.val().length != 11){
            $.toast("输入11位手机号", "cancel");
        }else if(!$('#realname').val()||!$('#identity').val()){
            $.toast("请完成表单", "cancel");
        }else{

            var body  ={
                realname:$('#realname').val(),
                tel:$phone.val(),
                sex:$("input[name='sex']:checked").val(),
                education:$('#education').val(),
                identity:$('#identity').val(),
                climate:$('#climate').val(),
                nation:$('#nation').val(),
                residence:$('#residence').val(),
                email:$('#email').val(),
                birthday:$('#birthday').val(),
                real_photo:$('#headimgurl1').val(),
            };
            var $this = $(this);
            ajax_post(getBaseUrl()+'/weixin/user/volunteer',jQuery.param(body),{
                success:function(data){
                    $.toptip(data.msg, 'success');
                },
                error:function(data){
                    $.toptip(data.msg, 'error');
                }
            })
        }

    })
</script>
{/block}